<template>
  <van-nav-bar
    title="商品分类"
    left-text="返回"
    left-arrow
    @click="$router.back()"
    fixed
    placeholder
  />
  <van-row>
    <van-col span="6" >
      <van-sidebar v-model="active" @change="leftMenuChange" class="leftList">
        <van-sidebar-item :title="item.name" v-for="(item) in cateList" :key="item.id"/>
      </van-sidebar>
    </van-col>
    <van-col>
        <div class="righteList">右侧列表</div>
    </van-col>
  </van-row>
</template>
<script setup>
import { ref } from 'vue'
import {ProductCateRequest} from '@/API/home'
let active = ref(0)
let cateList = ref([])
function leftMenuChange(index) {
  console.log(cateList.value[index])
}

 function CataList(){
  ProductCateRequest().then((r)=>{
    console.log(r.data.data);
    cateList.value=r.data.data
  })
}
CataList()
// //获取分类的商品展示到右侧
//  function cateItemList(item) {
//   console.log(item);

// }
</script>
<style scoped>
 .leftList,   .righteList {
        height: calc(100vh - 96px);
    }
</style>
